<template>
    <el-dialog :title="form.id?'编辑员工':'新建员工'" width="600px" :visible.sync="dialogVisible">
        <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
            <el-form-item prop="realname" label="姓名">
                <el-input v-model="form.realname" type="text" placeholder="请输入" style="width: 100%;" />
            </el-form-item>
            <el-form-item prop="phone" label="电话">
                <el-input v-model="form.phone" type="text" placeholder="请输入" style="width: 100%;" />
            </el-form-item>
            <el-form-item v-if="!form.id" prop="pwd" label="密码">
                <el-input v-model="form.pwd" type="password" placeholder="请输入" style="width: 100%;" />
            </el-form-item>
            <el-form-item v-if="!form.id" prop="repwd" label="重复密码">
                <el-input v-model="form.repwd" type="password" placeholder="请输入" style="width: 100%;" />
            </el-form-item>
            <el-form-item prop="auth" label="权限">
                <el-select v-model="form.auth" placeholder="请选择" style="width: 100%;">
                    <el-option v-for="item, index in authOptions" :key="index" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item prop="group_id" label="角色">
                <el-select v-model="form.group_id" placeholder="请选择" style="width: 100%;">
                    <el-option v-for="item, index in groupOptions" :key="index" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item prop="dept_id" label="部门">
                <el-cascader v-model="form.dept_id" :options="departOptions" :props="{value: 'id', label: 'name', children: 'child', checkStrictly: true}" :show-all-levels="false" style="width: 100%;" @change="deptChange" />
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="form.sort_name" type="text" placeholder="请输入" style="width: 100%;" />
            </el-form-item>
            <el-form-item label="接收线索">
                <el-select v-model="form.accept" placeholder="请选择" style="width: 100%;">
                    <el-option label="是" value="1" />
                    <el-option label="否" value="0" />
                </el-select>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="form.status" placeholder="请选择" style="width: 100%;">
                    <el-option label="启用" value="1" />
                    <el-option label="禁用" value="0" />
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { createMember, changeMember, groupList, departList } from '@/api/system'
import { deepClone } from '@/util'
export default {
    name: 'ResvervationAddDialog',
    data() {
        return {
            dialogVisible: false,
            form: {
                realname: '',
                phone: '',
                pwd: '',
                repwd: '',
                sort_name: '',
                auth: '',
                group_id: '',
                dept_id: '',
                accept: '1',
                status: '1'
            },
            authOptions: [],
            groupOptions: [],
            departOptions: [],
            rules: {
                realname: [{ required: true, message: '请输入姓名', trigger: 'change' }],
                phone: [{ required: true, message: '请输入电话', trigger: 'change' }],
                pwd: [
                    { required: true, message: '请输入密码', trigger: 'change' },
                    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符之间', trigger: 'change' }
                ],
                repwd: [
                    { required: true, message: '请输入确认密码', trigger: 'change' },
                    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符之间', trigger: 'change' }
                ],
                dept_id: [{ required: true, message: '请选择部门', trigger: 'change' }],
                group_id: [{ required: true, message: '请选择角色', trigger: 'change' }],
                auth: [{ required: true, message: '请选择权限', trigger: 'change' }]
            }
        }
    },
    mounted() {
        this.getOptions();
        const authConfig = {
            '1': [{ label: '总管理员', value: '1' }, { label: '管理员', value: '2' }, { label: '员工', value: '3' }],
            '2': [{ label: '管理员', value: '2' }, { label: '员工', value: '3' }],
            '3': [{ label: '员工', value: '3' }]
        }
        this.authOptions = authConfig[this.$store.state.user.auth]
    },
    methods: {
        showDialog(item) {
            this.dialogVisible = true;
            this.resetForm();
            this.resetParams();
            if (item && item.id) {
                this.$nextTick(() => {
                    this.form = deepClone(item);
                    this.form.pwd = this.form.password;
                    this.form.repwd = this.form.password;
                })
            }
        },
        resetForm() {
            this.$nextTick(() => {
                this.$refs.ruleForm.resetFields();
            })
        },
        resetParams() {
            this.form = {
                realname: '',
                phone: '',
                pwd: '',
                repwd: '',
                sort_name: '',
                auth: '',
                dept_id: '',
                group_id: '',
                accept: '1',
                status: '1'
            };
            
        },
        getOptions() {
            departList().then(res => {
                if (res.status == '1') {
                    this.departOptions = res.data.list || []
                }
            })
            groupList().then(res => {
                if (res.status == '1') {
                    this.groupOptions = res.data.list || []
                }
            })
        },
        handleSubmit(e) {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    if (this.form.id) {
                        changeMember(this.form).then(res => {
                            if (res.status == '1') {
                                this.$message.success('操作成功！')
                                this.$emit('success', res)
                            } else {
                                this.$message.error(res.message)
                            }
                        }).finally(() => {
                            this.dialogVisible = false
                        })
                    } else {
                        createMember(this.form).then(res => {
                            if (res.status == '1') {
                                this.$message.success('操作成功！')
                                this.$emit('success', res)
                            } else {
                                this.$message.error(res.message)
                            }
                        }).finally(() => {
                            this.dialogVisible = false
                        })
                    }
                    
                }
            })
        },
        deptChange(e) {
            console.log(e)
            this.$nextTick(() => {
                this.form.dept_id = e.length ? e[e.length - 1] : ''
            })
        }
    }
}
</script>